<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/attendance-management.css"></link>
<script src="//cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>
	<div class="panel panel-default">
		<div class="btn-toolbar panel-body" id="btn-tool" role="toolbar">
			<div class="button-tools">
				<button class="btn btn-default buttons" onclick="newRule();">新建考勤规则</button>
				<button class="btn btn-default buttons" onclick="seetings();">设置</button>
				<button class="btn btn-default buttons" onclick="viewResult();">查看考勤结果</button>
			</div>
			<div class="btn-group input-group"
				style="margin: 5px; width: 20%; border-right: none; float: right;">
				<input type="text" class="form-control" id="input_search"
					placeholder="规则名称"> <span class="input-group-btn">
					<button type="submit" class="btn btn-default search_button"
						style="border-radius: 0px 20px 20px 0px;">
						<span class="glyphicon glyphicon-search"></span>
					</button>
				</span>
			</div>
		</div>
	</div>

	<div class="panel panel-default" style="border-top: none">
		<div class="panel-body" style="padding: 0px">
			<ul id="myTab" class="nav nav-tabs" style="background-color: #F4F6F8">
				<li class="active"><a href="#already" data-toggle="tab">
						已激活</a></li>
				<li><a href="#notyet" data-toggle="tab">未激活</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="already">
					<table class="container table table-striped">
						<thead>
							<tr class="row">
								<th class="col-md-2">规则名称</th>
								<th class="col-md-2">创建者</th>
								<th class="col-md-3">创建时间</th>
								<th class="col-md-4">考勤地点</th>
								<th class="col-md-1">操作</th>
							</tr>
						</thead>

						<tbody>
							<!-- <tr class="row">
								<td class="col-md-2">规则134</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>

								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class="lasttdpop" style="display: none;"
										onmouseover="menuIn(this)" onmouseout="menuOut(this)">
										<a href="#" onclick="ruleDetail(this);">详细</a> <a href=""
											onclick="editRule(this);">编辑</a> <a href="#"
											onclick="deleteRule(this);">删除</a> <a href="#"
											onclick="viewResult();">查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-menu-hamburger"
									onmouseover="operationIn(this)" onmouseout="operationOut(this)"></span>
									<div class='lasttdpop' style='display: none;'
										onmouseover='menuIn(this)' onmouseout='menuOut(this)'>
										<a href='#'>详细</a> <a href='#'>编辑</a> <a href='#'>删除</a><a
											href='#'>查看结果</a>
									</div></td>
							</tr> -->
						</tbody>
					</table>
				</div>
				
				<div class="tab-pane fade" id="notyet">
					<table class="container table table-striped">
						<thead>
							<tr class="row">
								<th class="col-md-2">规则名称</th>
								<th class="col-md-2">创建者</th>
								<th class="col-md-3">创建时间</th>
								<th class="col-md-4">考勤地点</th>
								<th class="col-md-1">操作</th>
							</tr>
						</thead>

						<tbody>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-th-list"></span></td>
							</tr>
							<tr class="row">
								<td class="col-md-2">规则1</td>
								<td class="col-md-2">张三</td>
								<td class="col-md-3">2015-12-28 12:01</td>
								<td class="col-md-4">浙江省宁波市鄞州区江南路1689号浙江大学软件学院S319</td>
								<td class="col-md-1"><span
									class="glyphicon glyphicon-th-list"></span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 展示规则详细内容的模态框 -->
	<div class="modal fade" id="ruleDetailModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">规则详情</h4>
				</div>
				<div class="modal-body" style="padding: 0px 20px">
					<table class="table table-striped container"
						style="margin-bottom: 0px">
						<tr class="row">
							<td class="col-sm-3 text-right">规则状态：</td>
							<td class="col-sm-2 text-left" id="ruleState">启用</td>
							<td class="col-sm-3 text-right">规则名称：</td>
							<td class="col-sm-4 text-left" id="ruleName">上午上班考勤</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">创建者：</td>
							<td class="col-sm-2 text-left" id="creator">张三</td>
							<td class="col-sm-3 text-right">创建时间:</td>
							<td class="col-sm-4 text-left" id="createTime">2015-01-12
								08:32</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">签到时间：</td>
							<td class="col-sm-2 text-left" id="checkInTime">08:32</td>
							<td class="col-sm-3 text-right">限制时间：</td>
							<td class="col-sm-4 text-left" id="checkInPeriod">07:30~08:30</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">签退时间：</td>
							<td class="col-sm-2 text-left" id="checkOutTime">12:00</td>
							<td class="col-sm-3 text-right">限制时间：</td>
							<td class="col-sm-4 text-left" id="checkOutPeriod">11:30~12:30</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">推迟时间：</td>
							<td class="col-sm-2 text-left" id="delayTime">3分钟</td>
							<td class="col-sm-3 text-right">提前时间：</td>
							<td class="col-sm-4 text-left" id="leadTime">3分钟</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">签到提醒：</td>
							<td class="col-sm-2 text-left" id="checkInRemindTime">5分钟</td>
							<td class="col-sm-3 text-right">签退提醒：</td>
							<td class="col-sm-4 text-left" id="checkOutRemindTime">5分钟</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right">循环方式：</td>
							<td class="col-sm-2 text-left" id="circuled">单次</td>
							<td class="col-sm-3 text-right">考勤半径：</td>
							<td class="col-sm-4 text-left" id="radius">100米</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right" colspan="1">工作日：</td>
							<td class="col-sm-9 text-left" colspan="3" id="circlue">星期一、星期二、星期三、星期四、星期五</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right" colspan="1">考勤位置：</td>
							<td class="col-sm-9 text-left" colspan="3" id="centerStr">浙江省宁波市鄞州区江南路浙江大学软件学院教学楼S319</td>
						</tr>
						<tr class="row">
							<td class="col-sm-3 text-right" colspan="1">适用对象：</td>
							<td class="col-sm-9 text-left" colspan="3"><textarea rows=""
									cols="" id="users" disabled="disabled">张三、李四、王五、赵六、刘备、梦琪、忆柳、之桃、慕青、问兰、尔岚、元香、初夏、
									沛菡、傲珊、曼文、乐菱、痴珊、恨玉、惜文、香寒、新柔、语蓉、海安、夜蓉、涵柏、水桃、醉蓝、春儿、语琴、从彤、傲晴、语兰、又菱、碧彤、元霜、
									怜梦、紫寒、妙彤、曼易、南莲、紫翠、雨寒、易烟、如萱、若南、寻真、晓亦、向珊、慕灵、以蕊、寻雁、映易、雪柳、孤岚、笑霜、海云、凝天、沛珊、
									寒云、冰旋、宛儿、绿真、盼儿、晓霜、碧凡、夏菡、曼香、若烟、半梦、雅绿、冰蓝、灵槐、平安、书翠、翠风、香巧、代云、梦曼、幼翠、友巧、听寒、
									梦柏、醉易、访旋、亦玉、凌萱、访卉、怀亦、笑蓝、春翠、靖柏、夜蕾、冰夏、梦松、书雪、乐枫、念薇、靖雁、寻春、恨山、从寒、忆香、觅波、静曼、
									凡旋、以亦、念露、芷蕾、千兰、新波、代真、新蕾、雁玉、冷卉、紫山、千琴、恨天、傲芙、盼山、怀蝶、冰兰、山柏、翠萱、恨松、问旋、从南、白易、
									问筠、如霜、半芹、丹珍、冰彤、亦寒、寒雁、怜云、寻文、乐丹、翠柔、谷山、之瑶、冰露、尔珍、谷雪、乐萱、涵菡、海莲、傲蕾、青槐、冬儿、易梦、
									惜雪、宛海、之柔、夏青、亦瑶、妙菡、春竹、痴梦、紫蓝、晓巧、幻柏、元风、冰枫、访蕊、南春、芷蕊、凡蕾、凡柔、安蕾、天荷、含玉、书兰、雅琴、
									书瑶、春雁、从安、夏槐、念芹、怀萍、代曼、幻珊、谷丝、秋翠、白晴、海露、代荷、含玉、书蕾、听白、访琴、灵雁、秋春、雪青、乐瑶、含烟、涵双、
									平蝶、雅蕊、傲之、灵薇、绿春、含蕾、从梦</textarea></td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default buttons"
						data-dismiss="modal">返回</button>
					<button type="button" class="btn btn-default buttons">编辑</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/attendance-management.js"></script>
</body>
</html>